const StyleLintPlugin = require('stylelint-webpack-plugin')
const port = process.env.port || process.env.npm_config_port || 80 // 端口

module.exports = {
    lintOnSave: false,
    publicPath: './',
    css: {
        loaderOptions: {
            sass: {
                prependData: `
          @import "~@/assets/styles/variable.scss";
          @import "~@/assets/styles/mixin.scss";
        `,
            },
            less: {
                lessOptions: {
                    modifyVars: {
                        'primary-color': '#d14424',
                        'text-color': '#41464b',
                        'font-size-base': '13px',
                        'border-radius-base': '2px',
                    },
                    javascriptEnabled: true,
                },
            },
        },
    },
    devServer: {
        host: '0.0.0.0',
        port: port,
        open: true,
        proxy: {
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: {
                target: process.env.VUE_APP_BASE_URL,
                changeOrigin: true,
                pathRewrite: {
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        },
        disableHostCheck: true
    },
    chainWebpack: config => {
        config.module
            .rule('images')
            .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 5120 }))
    },
    configureWebpack: {
        plugins: [
            new StyleLintPlugin({
                files: ['src/**/*.{vue,html,css,scss,sass,less}'],
                failOnError: false,
                cache: false,
                fix: false,
            }),
        ],
    },
}